<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式/尺寸操作</title>
		<!-- 元素样式操作，直接操作元素的样式下的属性和属性值
		css（）            功能：
		                  1个参：传入css属性名
						  功能：
						  2个参
						  n个参：传入多个css属性名和属性值
						  语法糖：css（{"属性名"："属性值"}）
		width()和height（）
		outerwidth（）和outerheight				  
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 .box{
				 width:1200px ;
				 height: 200px;
				 background-color: red;
				 margin:20px ;
				 padding: 20px;
				 border:5px  solid green;
				 border-radius: ;
				 
			 }
			 .result{
				 font-weight: 700;
				 margin: 10px;
			 }
		 </style>
	</head>
	<body>
		<!-- css：box添加样式背景颜色 内外边距 边框5象素 -->
		<!-- 显示效果区域 -->
		<div class="box" id="targertbox"></div>
		<button id="getcolorbtn" >获取颜色属性值</button>
		<button id="setcolorbtn">设置</button>
		<button id="stebtn">设置多属性效果</button>
		<button id="gsbtn">获取元素高度/设置元素宽度</button>
		<button id="ghbtn">获取高度</button>
		<button id=""></button>
		<!-- 2.结果提示功能区域 -->
		<div class="result"></div>
		<script>
			$("#getcolorbtn").click(function(){
			var t=$(".box").css("background-color");
			$(".result").text("颜色是"+t)
			});
			
			
			$("#setcolorbtn").click(function(){
				$(".box").css("background-color","orange")
				
				$(".result").text("颜色是"+a)
			});
			
			$("#stebtn").click(function(){
				$(".box").css({"background-color":"black",
				"border":"5px solid yellow",
				"border-radius":"500px",
				"box-shadow":"0px 0px 40px 20px  pink"
				});
			});
			
	         $("#gsbtn").click(function(){
			    var  w=$(".box").width();
				$(".result").text("宽度是"+w )
			 });
			
			
			$("#ghbtn").click(function(){
				var h=$(".box").height();
				$(".result").text("高度是"+h)
			});
			
			
			
			
			
		</script>
	</body>
</html>